import { useState } from "react";
import Calendar from "react-calendar";
import styles from "./style.module.css";
import clsx from "clsx";
import Popup from "@/components/Popup";
import "react-calendar/dist/Calendar.css";
import { format } from "date-fns";

const DatePicker = ({ value = [] as any, onChange }) => {
  const [showCalendar, setShowCalendar] = useState(false);
  const [date, setDate] = useState(value);

  return (
    <>
      <div className="flex justify-between text-center leading-[56px]">
        <input
          type="text"
          readOnly={true}
          value={date[0] || ""}
          className="border-b-1 border-gray-200"
          placeholder="起始时间"
          onClick={() => setShowCalendar(true)}
        />
        <span>至</span>
        <input
          type="text"
          readOnly={true}
          value={date[1] || ""}
          className="border-b-1 border-gray-200"
          placeholder="结束时间"
          onClick={() => setShowCalendar(true)}
        />
      </div>
      <Popup visible={showCalendar} onCancel={() => setShowCalendar(false)}>
        <div className="flex justify-between leading-[45px] bg-white px-[12px]">
          <button
            className={styles.cancel}
            onClick={() => {
              setShowCalendar(false);
              setDate([]);
              onChange([]);
            }}
          >
            取消
          </button>
          <button
            className={styles.ok}
            onClick={() => {
              setShowCalendar(false);
              onChange(date);
            }}
          >
            确定
          </button>
        </div>
        <Calendar
          selectRange
          className={clsx(styles.calendar, styles.reactCalendar)}
          onChange={(date: any) => {
            setDate(date.map((d) => format(d, "yyyy-MM-dd")));
            // onChange(date);
          }}
          defaultValue={value}
        />
        
      </Popup>
    </>
  );
};

export default DatePicker;
